<template>
  <!-- 单个新闻卡片 -->
  <view class="news-item">
    <!-- 带图片的卡片 -->
    <view v-if="imgUrl" class="with-img">
      <image class="news-img" :src="imgUrl"></image>
      <view class="news-info">
        <text class="news-title">{{ title }}</text>
        <view class="tipsbox">
          <text v-if="isTop" class="top-tag">置顶</text>
          <text class="source">{{ author }}</text>
          <text class="comment-count">{{ comments }}评</text>
        </view>
      </view>
    </view>

    <!-- 无图片的卡片 -->
    <view v-else class="no-img">
      <text class="news-title">{{ title }}</text>
      <view class="tipsbox">
        <text v-if="isTop" class="top-tag">置顶</text>
        <text class="source">{{ author }}</text>
        <text class="comment-count">{{ comments }}评</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "cardViewText",
  props: {
    title: {
      type: String,
      default: "新闻标题",
      required: true
    },
    isTop: {
      type: Boolean,
      default: false,
      required: true
    },
    author: {
      type: String,
      default: "来源",
      required: true
    },
    comments: {
      type: Number,
      default: 0,
      required: true
    },
    imgUrl: { // 新增：图片地址（可选）
      type: String,
      default: ""
    }
  }
}
</script>

<style scoped>
/* 单个新闻卡片容器 */
.news-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

/* 带图片的卡片布局 */
.with-img {
  display: flex;
  align-items: flex-start;
}
.news-img {
  width: 150rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}
.news-info {
  flex: 1;
}

/* 标题样式 */
.news-title {
  font-size: 32rpx;
  line-height: 44rpx;
  display: block;
  margin-bottom: 10rpx;
}

/* 标签/来源/评论样式 */
.tipsbox {
  display: flex;
  gap: 10rpx;
  font-size: 26rpx;
  color: #999;
}
.top-tag {
  background: #f44336;
  color: #fff;
  font-size: 24rpx;
  padding: 2rpx 10rpx;
  border-radius: 4rpx;
}
</style>
